<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>欢迎</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            height: 45vh; /* 使用视口高度将容器高度设置为100% */
        }

        form {
            border: 1px solid #ccc; /* 表单边框示例 */
            padding: 20px;
            width: 300px; /* 表单宽度 */
        }
    </style>
</head>
<body>
<h1>欢迎使用AI自动生成巡检报告系统</h1>
<div>
    <button onclick="show()" style="width: 200px;height: 50px">点击展示简介</button>
    <script>
        function show() {
            var x = document.getElementById("myIntroduce");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>
</div>

<div id="myIntroduce" style="display: none;border: 3px solid black;">
    <P>系统巡检项目配置地址:目前采用上传文件，下载文件的方式更新配置文件</P>
    <P><a href="http://192.168.132.63:5200/params/config">http://192.168.132.63:5200/params/config</a></P>
    <P>自动生成巡检报告步骤演示：</P>
    <P>1. 选择巡检报告配置文件。巡检报告配置文件是一个.docx 模板，定义了巡检文档的主体内容</P>
    <P>2. 选择巡检命令配置文件。巡检命令定义了本次报告需要哪些命令,将命令封装到.json
        文件中，系统会将命令替换成查询结果</P>
    <P>3. 选择固定值参数配置文件。固定值参数文件定义了那些可以灵活替换的固定参数，比如作者，时间等</P>
    <P>4. 选择AI 参数配置文件。AI 参数配置文件中可以定义需要AI 处理的内容，比如对CPU 内存的查询结果进行分析</P>
    <p>5. 选择城市配置文件和城市。城市配置文件中定义了各城市的SSH 连接，目前支持SSH 密钥连接和SSH 密码链接，需要VPN环境的，
        需本机登录VPN即可连接</p>
    <p>6. 提交后，系统会生成一条处理日志，等待AI 生成报告完成后，在日志操作列支持文档下载的操作</p>
</div>

<h1 style="text-align: center;"> 自动生成巡检报告</h1>
<div class="container">
    <form method="post" action='/gen/doxc'>
        <label for="docxConfig">巡检报告配置文件：</label>
        <select id="docxConfig" name="docxConfig" style="text-align: center">
        </select>
        <p></p>
        <label for="commandConfig">巡检命令配置文件：</label>
        <select id="commandConfig" name="commandConfig" style="text-align: center">
        </select>
        <p></p>
        <label for="fixedConfig">固定值参数配置文件：</label>
        <select id="fixedConfig" name="fixedConfig" style="text-align: center">
        </select>
        <p></p>
        <label for="AIConfig">AI参数配置文件：</label>
        <select id="AIConfig" name="AIConfig" style="text-align: center">
        </select>
        <p></p>
        <label for="cityConfig">选择城市配置文件：</label>
        <select id="cityConfig" name="cityConfig" style="text-align: center">
            <option>-</option>
        </select>
        <p></p>
        <label for="city"> 选择城市：</label>
        <select id="city" name="city" style="width: 200px" multiple>
            <option>-</option>
        </select>
        <p></p>
        <input type="submit" value="提交">
    </form>
</div>

<div style="text-align: center;">
    <h2>日志记录</h2>
    <style>
        /* 定义表格的边框样式 */
        table {
            border-collapse: collapse; /* 使表格边框合并为一个单一的边框 */
            border: 1px solid black; /* 表格边框宽度为 1px，边框颜色为黑色 */
            width: 100%; /* 表格宽度为父元素的 100%，或者你可以指定一个具体的宽度 */
        }

        th, td {
            border: 1px solid black; /* 表头和单元格都有边框 */
            padding: 8px; /* 单元格内边距 */
            text-align: left; /* 单元格文本左对齐 */
        }

        th {
            background-color: #f2f2f2; /* 表头背景颜色 */
        }
    </style>
    <table>
        <tr>
            <th>时间</th>
            <th>城市</th>
            <th>文档名称</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        {% for row in result %}
        <tr>
            <td>{{ row.create_time }}</td>
            <td>{{ row.city }}</td>
            <td>{{ row.template_name }}</td>
            <td>{{ row.status }}</td>
            {% if row.status == '生成完成' %}
            <td>
                <button id="downloadDocx{{ row.template_name }}">下载</button>
            </td>
            {% else %}
            <td>等待</td>
            {% endif %}
        </tr>
        {% endfor %}
    </table>
</div>


</body>

<script>
    // 当文档加载完毕时执行
    document.addEventListener('DOMContentLoaded', function () {
        // 获取所有带有特定ID的按钮
        var buttons = document.querySelectorAll('button[id^="downloadDocx"]');
        // 为每个按钮添加点击事件监听器
        buttons.forEach(function (button) {
            button.addEventListener('click', function () { // 这里可以添加下载文件的逻辑
                fetch('/download/' + this.id.replace('downloadDocx', ''))
                        .then(response => response.blob())
                        .then(blob => {
                            const url = window.URL.createObjectURL(blob);
                            const a = document.createElement('a');
                            a.href = url;
                            a.download = this.id.replace('downloadDocx', '') + '.docx';
                            document.body.appendChild(a);
                            a.click();
                            document.body.removeChild(a);
                            window.URL.revokeObjectURL(url);
                        });
            });
        });

        fetch('/ConfigSelect/docx')
                .then(response => response.json())  // 解析JSON
                .then(data => {
                    // 获取select元素
                    const select = document.getElementById('docxConfig');
                    // 遍历城市列表并创建option元素
                    data.forEach(docxConfigParams => {
                        const option = document.createElement('option');
                        option.value = docxConfigParams;
                        option.textContent = docxConfigParams;
                        select.appendChild(option);
                    });
                })
                .catch(error => console.error('Error:', error));

        fetch('/ConfigSelect/command')
                .then(response => response.json())  // 解析JSON
                .then(data => {
                    // 获取select元素
                    const select = document.getElementById('commandConfig');
                    // 遍历城市列表并创建option元素
                    data.forEach(docxConfigParams => {
                        const option = document.createElement('option');
                        option.value = docxConfigParams;
                        option.textContent = docxConfigParams;
                        select.appendChild(option);
                    });
                })

        fetch('/ConfigSelect/ai')
                .then(response => response.json())  // 解析JSON
                .then(data => {
                    // 获取select元素
                    const select = document.getElementById('AIConfig');
                    // 遍历城市列表并创建option元素
                    data.forEach(docxConfigParams => {
                        const option = document.createElement('option');
                        option.value = docxConfigParams;
                        option.textContent = docxConfigParams;
                        select.appendChild(option);
                    });
                })

        fetch('/ConfigSelect/fixed')
                .then(response => response.json())  // 解析JSON
                .then(data => {
                    // 获取select元素
                    const select = document.getElementById('fixedConfig');
                    // 遍历城市列表并创建option元素
                    data.forEach(docxConfigParams => {
                        const option = document.createElement('option');
                        option.value = docxConfigParams;
                        option.textContent = docxConfigParams;
                        select.appendChild(option);
                    });
                })

                .catch(error => console.error('Error:', error));

        // 发送GET请求到/citySelect
        fetch('/ConfigSelect/city')
                .then(response => response.json())  // 解析JSON
                .then(data => {
                    // 获取select元素
                    const select = document.getElementById('cityConfig');
                    // 遍历城市列表并创建option元素
                    data.forEach(cityfileParams => {
                        const option = document.createElement('option');
                        option.value = cityfileParams;
                        option.textContent = cityfileParams;
                        select.appendChild(option);
                    });
                })
                .catch(error => console.error('Error:', error));
    });

    // 监听城市配置文件选择变化
    document.getElementById('cityConfig').addEventListener('change', function () {
        const configId = this.value;
        fetch(`/citySelect/${configId}`)
                .then(response => response.json())
                .then(data => {
                    console.log(data)
                    const cityDropdown = document.getElementById('city');
                    cityDropdown.innerHTML = ''; // 清空现有选项
                    data.forEach(city => {
                        const option = document.createElement('option');
                        option.value = city.city;
                        option.textContent = city.city_name;
                        cityDropdown.appendChild(option);
                    });
                });
    });
</script>
</html>